<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台系统</title>
    <!-- 引入样式 -->

    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/style.css">

    <!-- 引入组件库 -->

    <script src="../js/vue.js"></script>

    <script src="../element-ui/lib/index.js"></script>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script src="../js/axios-0.18.0.js"></script>

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 900px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '2','3']" >
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>用户管理</template>
                    <el-menu-item-group>
<!--                        <template slot="title">分组一</template>-->
                        <el-menu-item index="1-1">
                            <a href="/pages/users.html">用户管理</a>
                        </el-menu-item>
<!--                        <el-menu-item index="1-2">选项2</el-menu-item>-->
                    </el-menu-item-group>

                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>问答管理</template>
                    <el-menu-item-group>
<!--                        <template slot="title">分组一</template>-->
                        <el-menu-item index="2-1">
                            <a href="/pages/questions.html">帖子管理</a>
                        </el-menu-item>
                        <el-menu-item index="2-2">
                            <a href="/pages/answers.html">评论管理</a>
                        </el-menu-item>
                    </el-menu-item-group>

                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>资源管理</template>
                    <el-menu-item-group>
<!--                        <template slot="title">算法管理</template>-->
                        <el-menu-item index="3-1">
                            <a href="/pages/files.html">算法管理</a>
                        </el-menu-item>
<!--                        <el-menu-item index="3-2">选项2</el-menu-item>-->
                    </el-menu-item-group>

                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
<!--                <span ><center><h2>用户管理</h2></center></span>-->
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>浦江欢迎您</span>
            </el-header>



            <el-main>
                <div class="filter-container">

                    <el-input placeholder="用户账号" v-model="pagination" style="width: 200px;" class="filter-item"></el-input>

                    <el-button @click="getAll()" class="dalfBut">查询</el-button>

                    <!--                        <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>-->

                </div>

                <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>

                    <el-table-column type="index" align="center" label="序号"></el-table-column>

                    <el-table-column prop="loginname" label="账号" align="center"></el-table-column>

                    <el-table-column prop="password" label="密码" align="center"></el-table-column>

                    <el-table-column prop="email" label="email" align="center"></el-table-column>

                    <el-table-column prop="nickname" label="昵称" align="center"></el-table-column>

                    <el-table-column prop="identity" label="状态" align="center">
                        <!-- 定义slot-scope="scope"后就可在scope中获取列和行数据了 -->
                        <template slot-scope="scope">
                            <span v-if="scope.row.identity == 1">启用</span>
                            <span v-else-if="scope.row.identity == 2">管理员</span>
                            <span v-else>禁用</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" align="center">

                        <template slot-scope="scope">

                            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>

                            <el-button type="danger" size="mini" @click="handleDelete(scope.row)">禁用</el-button>


                        </template>

                    </el-table-column>

                </el-table>

            </el-main>
        </el-container>
    </el-container>

    <!-- 编辑标签弹层 -->

    <div class="add-form">

        <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">

            <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">

                <el-row>

                    <el-col :span="12">

                        <el-form-item label="账号" prop="loginname">

                            <el-input v-model="formData.loginname"/>

                        </el-form-item>

                    </el-col>

                    <!--                                    <el-col :span="12">-->

                    <!--                                        <el-form-item label="密码" prop="password">-->

                    <!--                                            <el-input v-model="formData.password"/>-->

                    <!--                                        </el-form-item>-->

                    <!--                                    </el-col>-->

                </el-row>

                <el-row>
                    <el-col :span="12">

                        <el-form-item label="email" prop="email">

                            <el-input v-model="formData.email"/>

                        </el-form-item>

                    </el-col>
                    <el-col :span="12">

                        <el-form-item label="昵称" prop="nickname">
                            <el-input v-model="formData.nickname"/>
                        </el-form-item>

                        <el-form-item label="uid" prop="uid">
                            <el-input v-model="formData.uid" type="hidden"></el-input>
                        </el-form-item>

                    </el-col>

                    <!--                                    <el-col :span="24">-->

                    <!--                                        <el-form-item label="描述">-->

                    <!--                                            <el-input v-model="formData.description" type="textarea"></el-input>-->

                    <!--                                        </el-form-item>-->

                    <!--                                    </el-col>-->

                </el-row>

            </el-form>

            <div slot="footer" class="dialog-footer">

                <el-button @click="dialogFormVisible4Edit = false">取消</el-button>

                <el-button type="primary" @click="handleEdit()">确定</el-button>

            </div>

        </el-dialog>

    </div>




</div>

<script>
    var vue = new Vue({

        el: '#app',
        data:{
            uid :"",
            pagination: "",
            dataList: [],//当前页要展示的列表数据
            formData: {},//表单数据
            dialogFormVisible: false,//控制表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            value:true
        },

        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.getAll();
        },

        methods: {

            //列表
            getAll() {
                console.log(this.pagination)
                //发送ajax请求
                axios.get(`/admin/users?loginname=${this.pagination}`).then((res)=>{
                    // console.log(res.data)
                    this.dataList = res.data.data;
                });
            },

            //弹出添加窗口
            handleCreate() {
                this.dialogFormVisible = true;
                this.resetForm();
            },

            //重置表单
            resetForm() {
                this.formData = {};

            },

            //添加
            handleAdd () {

            },

            //弹出编辑窗口
            handleUpdate(row) {
                this.formData.uid = row.uid;
                // console.log(this.formData.uid)
                //row.id 查询条件
                // console.log(row.uid);
                //查询数据，根据id查询
                axios.get(`/admin/user?uid=${row.uid}`).then((res)=>{
                    // console.log(res.data.data);
                    if(res.data.code == 20041){

                        //展示弹层，加载数据
                        this.formData = res.data.data;
                        this.dialogFormVisible4Edit = true;
                    }else{
                        this.$message.error(res.data.msg);
                    }
                });
            },

            //编辑
            handleEdit() {
                console.log(this.formData)
                //发送ajax请求
                axios.post("/admin/userUpdate",this.formData).then((res)=>{
                    //如果操作成功，关闭弹层，显示数据
                    if(res.data.code == 20031){
                        this.dialogFormVisible4Edit = false;
                        this.$message.success("修改成功");
                    }else if(res.data.code == 20030){
                        this.$message.error("修改失败");
                    }else{
                        this.$message.error(res.data.msg);
                    }
                }).finally(()=>{
                    this.getAll();
                });
            },

            // 禁用
            handleDelete(row) {
                // if(this.value == true) {
                    //1.弹出提示框
                    this.$confirm("此操作将禁用该用户，是否继续？", "提示", {
                        type: 'info'
                    }).then(() => {
                        //2.做禁用业务
                        axios.get(`/admin/limit?uid=${row.uid}`).then((res) => {
                            if (res.data.code == 20021) {
                                this.$message.success("禁用成功");
                                this.value = false;
                            } else {
                                this.$message.error("禁用失败");
                            }
                        }).finally(() => {
                            this.getAll();
                        });
                    }).catch(() => {
                        //3.取消删除
                        this.$message.info("取消禁用操作");
                    });
                // }
            }
        }
    })

</script>
</body>
</html>